
<template>
  <div class="home_header">
    <div class="home_classification">
      <el-row class="tac">
        <el-col :span="24">
          <el-menu default-active="1" @select="select">
            <el-menu-item :index="item.id" :key="index" v-for="(item, index) in tableTabs" @click="jumpTo(item)">
              <template slot="title">
                <span>{{item.name}}</span>
                <span style="float:right"><i class="el-icon-arrow-right"></i></span>
              </template>
            </el-menu-item>
            <!-- <el-menu-item index="2">
              <span slot="title">人事/行政/财务/法务</span>
            </el-menu-item>
            <el-menu-item index="3">
              <span slot="title">生产制造/营运管理</span>
            </el-menu-item>
            <el-menu-item index="4">
              <span slot="title">客服/技术支持</span>
            </el-menu-item>
            <el-menu-item index="5">
              <span slot="title">教育/培训</span>
            </el-menu-item>
            <el-menu-item index="6">
              <span slot="title">视觉/交互/设计</span>
            </el-menu-item>
            <el-menu-item index="7">
              <span slot="title">
                客服/技术支持商务服务/生活服务
              </span>
            </el-menu-item> -->
            <!-- <hr> -->
            <el-menu-item index="1" default-active="1" @click="jumpAll" class="xsqbzw">
              <span slot="title" class="count_xsqb">
                显示全部职位
                <span class="icon_xsqb">∨</span>
              </span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="home_wheel">
      <!-- <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
          <div class="swiper-slide slide1" v-for="(item, index) in imgPath" :key="index">
            <a v-if="item.url" :href="item.url" target="_blank">
              <img :src="item.imgPath" alt="">
            </a>
            <img :src="item.imgPath" alt="" v-else>
          </div>
        </div>

        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
      </div> -->
      <el-carousel :interval="5000" height="400px">
        <el-carousel-item v-for="(item, index) in imgPath" :key="index">
          <a v-if="item.url" :href="item.url" target="_blank">
            <img :src="item.imgPath" alt="">

          </a>
          <img :src="item.imgPath" alt="" v-else>
          <div class="imgtitle">
            <div class="imgtitlecount">
              {{item.title}}
            </div>

          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide slide1" v-for="(item, index) in imgPath" :key="index">
            <img :src="item.imgPath" alt="">
          </div>
        </div>
      </div> -->
    </div>
    <div class="home_login">
      <login></Login>
    </div>

  </div>
</template>

<script>
import Swiper from 'swiper';
import '../../../assets/css/swiper.min.css';
import Login from "./publicLogin";
import { listPageImg, findParent } from '../../../api/homeIndex';
// // 右侧菜单导航栏
// import rightPopover from './rigitPopover'
export default {
  name: 'homeHeader',
  components: {
    Login,
    // rightPopover
  },
  data () {
    return {
      imgPath: [],
      tableTabs: [],
      // 是否回到顶部
      gotop: false
    }
  },
  methods: {
    // 选择菜单事件
    select (val) {
      console.log(val)
    },
    // 广告轮播图
    listPageImg () {
      let obj = {
        "masterAdvert": "1"
      }
      // 轮播图请求
      listPageImg(obj).then((res) => {
        if (res.success) {
          let data = res.data.records || []
          // console.log(data, '广告轮播图')
          this.imgPath = data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 热门左上角职位分类 7个
    findParent () {
      findParent().then((res) => {
        if (res.success) {
          let datas = res.data
          this.tableTabs = datas.slice(0, 7)
          // console.log(datas, ' 热门职位类目请求成功')
          // this.timeout()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 跳转查询页面
    jumpTo (item) {
      this.$router.push({
        path: '/JobHunting',
        query: item
      })
    },
    jumpAll () {
      this.$router.push({
        path: '/JobHunting',
        query: { all: 'all' }
      })
    },
    handleScroll () {
      let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop () {

      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 5);
    }
  },
  mounted () {

    // 此处true需要加上，不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.handleScroll, true);
    /* eslint-disable no-new */
    // 这个事swiper 5.0 的写法
    // var galleryThumbs = new Swiper('.gallery-thumbs', {
    //   spaceBetween: 10,
    //   slidesPerView: 4,
    //   observer: true,//修改swiper自己或子元素时，自动初始化swiper
    //   observeParents: true,//修改swiper的父元素时，自动初始化swiper
    //   watchSlidesVisibility: true,//防止不可点击
    // });
    // var galleryTop = new Swiper('.gallery-top', {
    //   spaceBetween: 10,
    //   thumbs: {
    //     swiper: galleryThumbs,
    //   }
    // });

    // 这个事swiper 是3.0的写法
    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      slideToClickedSlide: true,
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
      speed: 500,
      autoplay: 5000,
      loop: false // 是否轮询
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
      touchRatio: 0.01,
      slideToClickedSlide: true,
      autoScrollOffset: 1
    });


    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    setTimeout(() => {
      console.log(document.getElementsByClassName('swiper-wrapper')[1])
      document.getElementsByClassName('swiper-wrapper')[1].style.transform = 'translate3d(0px, 0px, 0px)';
    }, 150)
  },
  created () {
    this.findParent()
    this.listPageImg()
  }
}
</script>

<style>
.home_header {
    width: 1200px;
    height: 385px;
    margin: 0 auto;
    /* margin-top: 16px; */
    /* position: relative; */
    display: flex;
    justify-content: space-between;
}
.home_wheel img {
    width: 600px;
    height: 400px;
}
.imgtitle {
    background: #333;
    color: #fff;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    opacity: 0.5;
}
.imgtitlecount {
    width: 480px;
    font-size: 14px;
}
.home_wheel /deep/ .el-carousel__button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.home_wheel /deep/ .el-carousel__indicator--horizonta {
    padding: 20px 2px;
}
.home_wheel /deep/ .el-carousel__indicators--horizontal {
    left: auto;
    right: -25px;
}
.home_classification {
    width: 312px;
    /* background: khaki; */
    border: 1px solid rgb(245, 245, 245);
}
.home_classification /deep/ .el-menu {
    border-right: none;
}
.home_wheel {
    width: 600px;
    margin: 0 10px;
    background: #ffffff;
}
.home_login {
    width: 312px;
    background: olive;
}
.el-menu .home_classification /deep/ .el-menu-item,
.el-submenu__title {
    height: 48px;
    line-height: 48px;
}
.home_classification /deep/ .el-menu-item,
.el-submenu__title span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    /* color:rgba(34,34,34,1); */
    border: 1px solid rgb(245, 245, 245);
    height: 50px;
    line-height: 50px;
}
.swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
}
.slide1 img {
    width: 100%;
    height: 100%;
}
.gallery-top {
    height: 70%;
    width: 100%;
}
.gallery-thumbs {
    height: 30%;
    box-sizing: border-box;
    padding: 20px 10px;
}
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    border: 1px solid rgba(213, 213, 213, 1);
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}
.gallery-thumbs .swiper-slide-active {
    opacity: 1;
    border: 1px solid #e5e5e5;
}
.tabs /deep/ .el-tabs__header {
    margin: 0px 50px 0px;
}

li,
ul {
    list-style: none;
}
.zp-iconfont {
    font-family: 'zp-iconfont' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.zp-sidebar__link {
    display: block;
    margin: 0 4px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    color: #bababa;
}
.zp-sidebar__line::after {
    content: '';
    width: 60%;
    height: 2px;
    position: absolute;
    top: -20px;
    left: 2px;
    background: rgba(232, 232, 232, 1);
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
.el-card {
    border: 0px solid #ebeef5;
}
.home_classification .xsqbzw {
    background: rgb(61, 158, 255);
}
.home_classification .count_xsqb {
    color: #fff;
}
.icon_xsqb {
    float: right;
    color: #409eff;
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    line-height: 20px;
    text-align: center;
    background: #fff;
    margin-top: 12px;
    border-radius: 50%;
    margin-right: 10px;
}
</style>